<script setup>
import {ref,reactive} from 'vue'
import { useStore } from 'vuex'
import ImgUp from '@/components/fileupImgBase'
import { muajax,$message,until,cache } from '@/common'

let store		=	useStore();
let data		=	reactive({type:1});//数据
let param		=	reactive({});//参数
const visible	=	ref(false);//显示
const forms		=	ref();//表单ref
const loading	=	ref(false);//提交中
let fileup=reactive({
				file:{},
				filelist:[],
			})
// 提交数据 待开发：修改自己的信息后更新登录缓存
function send(){
	console.log(data)
	forms.value.validate().then(async ()=>{
		console.log('验证通过');
		loading.value=true;
		let rs = await muajax.accountSave({
			modself:param.modself,
			...data,
		});
		loading.value=false;
		if(rs.status==200){
			$message.success(rs.msg);
			visible.value=false;
		}
	}).catch(err=>{
		console.log('验证不通过');
		// this.$errorFocus(err);
	})
}

//初始化本页数据
async function datainit(){
	let rs = await muajax.accountGet({ id :param.id});
	if(rs.status==200){
		if(rs.data.head){
			fileup.filelist.push({
				uid: -1,
				name: rs.data.head,
				status: 'done',
				url:rs.data.head,
			})
		}
		until.assignObj({data},rs.data);
	}
}

// 显示控制
function show(show,pms){
    visible.value=show;
    if(show){
		if(pms?.modself){
			pms.id=store.state.user.id;
		}
		for(let k in pms){
			// console.log(pms[k])
			param[k]=pms[k]
		}
		until.clearObj(data);
		data.type=1;
		fileup.filelist=[];
        if(!!pms?.id){
			datainit();
		}
    }
}
// 对外导出
defineExpose({
	show
})
</script>
<template>
<!-- 会导致message无法显示 -->
<!-- :zIndex="1050" -->
    <a-modal
		v-model:visible="visible"
		width="700px"
		title="账号信息"
		:maskClosable="false"
		@ok="send"
		cancelText="取消"
		okText="提交"
		:confirmLoading="loading"
	>
		<a-form
		ref="forms"
		:model="data"
		>
			<a-form-item
				label="头像"
				:labelCol="{span: 4}"
				name="thumb"			>
				<ImgUp
					ref="imgup"
					:fileup="fileup"
					:api="muajax.api.upuserhead"
					@done="path=>data.head=path"
					@del="data.head=''"
				/>
			</a-form-item>
			<a-form-item
				label="账号"
				:labelCol="{span: 4}"
				name="username"
				:rules="[{required:true,message:'请输入账号'}]"
			>
				<a-input
					placeholder="请输入"
					v-model:value="data.username"
				/>
			</a-form-item>
			<a-form-item
				label="密码"
				name="password"
				:labelCol="{span:4}"
				v-if="param.modself!=2 && !data.id"
			>
				<a-input
					value="默认密码：123456"
					disabled
				/>
				<!-- <a-input-password
					size="large"
					placeholder="请输入"
					value="默认密码：123456"
					disabled
				>
					<template #prefix>
						<LockOutlined />
					</template>
				</a-input-password> -->
			</a-form-item>
			<a-form-item
				label="姓名"
				:labelCol="{span: 4}"
				name="name"
				:rules="[{required:true,message:'请输入姓名'}]"
			>
				<a-input
					placeholder="请输入"
					v-model:value="data.name"
				/>
			</a-form-item>
			<a-form-item
				label="手机号"
				:labelCol="{span: 4}"
				name="mobilephone"
				:rules="[{required:true,message:'请输入手机号'}]"
			>
				<a-input
					placeholder="请输入"
					v-model:value="data.mobilephone"
				/>
			</a-form-item>
			<a-form-item
				label="邮箱"
				:labelCol="{span: 4}"
				name="email"
				:rules="[{required:true,message:'请输入邮箱'}]"
			>
				<a-input
					placeholder="请输入"
					v-model:value="data.email"
				/>
			</a-form-item>
			<a-form-item
				label="账号状态"
				:labelCol="{span: 4}"
				name="type"
				:rules="[{required:true,type:'number',message:'请选择状态'}]"
				v-if="param.modself!=2"
			>
				<a-radio-group v-model:value="data.type">
					<a-radio :value="1">正常</a-radio>
					<a-radio :value="2">禁用</a-radio>
				</a-radio-group>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<style lang="less" scoped>

</style>